<template>
    <div class="title" @click="showPopover = showPopover ? false : true">
        <div class="language" :class="{ 'router-link-active': showPopover }">
            {{ setat.checked == "zh" ? "中文简体" : "English" }}
            <van-icon name="arrow-up" v-if="showPopover" />
            <van-icon name="arrow-down" v-else />
        </div>
    </div>
    <van-radio-group v-model="setat.checked" v-if="showPopover">
        <van-cell-group inset>
            <van-cell
                :title="item.name"
                clickable
                :class="{ active: item.locale == setat.checked }"
                @click="toggleLanguage(item.locale), (showPopover = false)"
                v-for="(item, index) in setat.languageList"
                :key="index"
            >
                <template #right-icon> </template>
            </van-cell>
        </van-cell-group>
    </van-radio-group>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { Popup, Cell, CellGroup, RadioGroup, Radio } from "vant";
import { i18n, vantLocales } from "@/i18n/index";
import { AppModule } from "@/store/modules/app";
export default defineComponent({
    components: {
        [Popup.name]: Popup,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,
    },
    setup() {
        const showPopover = ref(false);
        const setat = reactive({
            open: false,
            checked: i18n.global.locale,
            bg: "",
            languageList: [
                {
                    name: "English",
                    locale: "en",
                },
                {
                    name: "中文简体",
                    locale: "zh",
                },
                // {
                //     name: "中文繁体",
                //     locale: "tw",
                // },
                // {
                //     name: "한국인", //韩
                //     locale: "ko",
                // },
                // {
                //     name: "日本", //日
                //     locale: "ja",
                // },
                // {
                //     name: "แบบไทย", //泰语
                //     locale: "th",
                // },
                // {
                //     name: "عرب", //阿拉伯
                //     locale: "ar",
                // },
            ],
        });
        const toggleLanguage = async (locale: string) => {
            setat.checked = locale;
            i18n.global.locale = locale;
            vantLocales(i18n.global.locale);
            AppModule.toggleLanguage(i18n.global.locale);
            setat.open = false;
        };
        return {
            setat,
            toggleLanguage,
            showPopover,
        };
    },
});
</script>
<style lang="less" scoped>
.title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    word-wrap: break-word; /* 允许在长单词中间换行 */
    word-break: break-all; /* 允许任意位置的单词断开 */
    border-bottom: 1px solid #d9d9d9;
}
.language {
    cursor: pointer;
    text-align: center;
    &.router-link-active {
        color: #eb0029;
        font-weight: 700;
    }
}

.van-cell-group--inset {
    margin: 0;
}

.van-radio-group {
    .van-cell-group {
        background: transparent;
        margin-top: 16px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        .van-cell {
            display: inline-block;
            margin: 0 6px;
            width: auto;
            height: auto;
            padding: 5px 33px;
            background: transparent;
            white-space: nowrap;
            background: #fff;
            border-radius: 10px;
            border: 1px solid #d9d9d9;

            &.active {
                border: 1px solid #ffccd5;
                background: #fff7f7;
            }

            &:after {
                opacity: 0.2;
            }
        }
    }
}
</style>
